<template>
  <div class="trade-container">
    <div class="header">
      <button class="close-button" @click="toggleModal" v-if="false">X</button>
      <div class="title">卖单</div>
	  <view class="topTab" v-if="false">
	  	<view class="tab" @click="topTab(0)" :class="tabIndex==0?'tabOp':''"> 卖单 </view>
	  	<view class="tab" @click="topTab(3)" :class="tabIndex==1?'tabOp':''"> 卖单 </view>	 
	  </view>

      <div class="filter">
		  <div class="top_right_button" @click="showSellModel">挂卖</div>
        <select v-model="priceFilter" v-if="false">
          <option value="5001以上">5001以上</option>
          <!-- 添加其他选项 -->
        </select>
      </div>
    </div>
    <div class="options">
      <div class="option" v-for="(item, index) in options" :key="index">
        <div class="option-title">{{ item.title }}</div>
        <div class="option-details">
          <span>数量：{{ item.quantity }}股</span>
          <span>单价：¥{{ item.price }}</span>
        </div>
        <div class="option-price">¥{{ item.totalPrice }}<button class="cu-btn round margin-lr-bj wanl-bg-orange" @click="handleSell(item)">买</button></div>
        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
	  tabIndex:0,
      priceFilter: '5001以上',
      options: [
        { title: '期权', quantity: 10000, price: 0.18, totalPrice: 1800 },
        { title: '期权', quantity: 10000, price: 0.18, totalPrice: 1800 },
        { title: '期权', quantity: 20000, price: 0.18, totalPrice: 3600 },
        { title: '期权', quantity: 26000, price: 0.18, totalPrice: 4680 },
        { title: '期权', quantity: 50000, price: 0.18, totalPrice: 9000 }
      ]
    };
  },
  methods: {
    toggleModal() {
      // Toggle modal visibility
    },
    handleSell(item) {
      // Handle sell action
    }
  }
};
</script>

<style >
@import "market";

.right_button{
		
}
</style>